<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
</head>

<body onload="checkCookies()" onbeforeunload="checkToken()">
    <!-- 触发点击事件 -->
    <h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>
    <script>
        function changetext(id) {
            id.innerHTML = "Ooops!";
        }
    </script>
    <h1 onclick="changetext(this)">点击我!</h1>

    <!-- 事件属性：onclick -->
    <p>点击按钮执行 <em>displayDate()</em> 函数.</p>
    <button onclick="displayDate()">点这里</button>
    <script>
        function displayDate() {
            document.getElementById("demo").innerHTML = Date();
        }
    </script>
    <p id="demo"></p>

    <!-- 使用 HTML DOM 来分配事件 -->
    <p>点击按钮执行 <em>displayDate()</em> 函数.</p>
    <button id="myBtn">点这里</button>
    <script>
        document.getElementById("myBtn").onclick = function () { displayDate() };
        function displayDate() {
            document.getElementById("demo2").innerHTML = Date();
        }
    </script>
    <p id="demo2"></p>

    <!-- onload 和 onunload 事件 -->
    <script>
        function checkCookies() {
            if (navigator.cookieEnabled == true) {
                alert("Cookies 可用")
            }
            else {
                alert("Cookies 不可用")
            }
        }
        function checkToken() {
            if (2 > 1) {
                console.log("确定离开页面嘛？");
            }
        }
    </script>
    <p>弹窗-提示浏览器 cookie 是否可用。</p>

    <!-- onchange 事件 -->
    <script>
        function myFunction() {
            var x = document.getElementById("fname");
            x.value = x.value.toUpperCase();
        }
    </script>

    输入你的名字: <input type="text" id="fname" onchange="myFunction()">
    <p>当你离开输入框后，函数将被触发，将小写字母转为大写字母。</p>

    <!-- onmouseover 和 onmouseout 事件 -->
    <div onmouseover="mOver(this)" onmouseout="mOut(this)"
        style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
    <script>
        function mOver(obj) {
            obj.innerHTML = "Thank You"
        }
        function mOut(obj) {
            obj.innerHTML = "Mouse Over Me"
        }
    </script>

    <!-- onmousedown、onmouseup 以及 onclick 事件 -->
    <!-- onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。
        首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，
        当完成鼠标点击时，会触发 onclick 事件。 -->
    <div onmousedown="pressDown(this)" onmouseup="releaseUp(this)"
        style="background-color:#08f500;width:120px;height:20px;padding:40px;">Mouse Over Me</div>
    <script>
        function releaseUp(obj) {
            obj.innerHTML = "Thank You";
            obj.style.color = "white";
            obj.style = "background-color:#08f500;width:120px;height:20px;padding:40px;";
        }
        function pressDown(obj) {
            obj.innerHTML = "Release Me";
            obj.style.color = "white";
            obj.style = "background-color:#D94A38;width:120px;height:20px;padding:40px;";
        }
    </script>

    <!-- 当输入字段获得焦点时，改变其背景色:onfocus -->
    输入你的名字: <input type="text" onfocus="funOnFocus(this)">
    <p>当输入框获取焦点时，修改背景色（background-color属性） 将被触发。</p>
    <script>
        function funOnFocus(obj){
            obj.style.background = "green";
        }
    </script>
</html>